<template>
    <div class="main" ref="main">
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
let main = ref();
const init = () => {
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xa0a0a0);
    const camera = new THREE.PerspectiveCamera(75, main.value.clientWidth / main.value.clientHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(main.value.clientWidth, main.value.clientHeight);
    main.value.appendChild(renderer.domElement);

    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x000000 });
    camera.position.z = 5;

    const loader = new GLTFLoader();
    let mox = null;
    loader.load('/fc.glb', function (gltf) {
        mox = gltf.scene;
        scene.add(mox);
        animate();
    }, undefined, function (error) {
        console.error(error);
    });

    function animate() {
        if (camera.position.z < 7) {
            camera.position.z += 0.01;
        }
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }
}
onMounted(() => {
    init();
})
</script>

<style lang="less" scoped>
.main {
    width: 800px;
    height: 500px;
}
</style>